<template>
  <view class="page container">
    <z-paging
      :refresher-enabled="false"
      :auto-full-height="false"
      :default-page-size="15"
      ref="pagingRef"
      v-model="dataList"
      @query="queryList"
      :paging-style="{ 'background-color': 'transparent' }"
    >
      <view
        slot="top"
        class="page-top"
        :style="{ paddingBottom: viewType === 'map' ? '0' : '28rpx' }"
      >
        <view class="search-box bgc-fff flex-column-center pl-32 pr-24">
          <u-search
            shape="square"
            placeholder="请输入烟酒门店关键字"
            v-model="params.title"
            :showAction="false"
            @search="handleSearch"
            @clear="handleSearch"
          ></u-search>
          <block>
            <image
              src="/static/svg/map-icon.svg"
              class="w-88 h-88 ml-20"
              @click="changeViewType('map')"
              v-if="viewType === 'list'"
            ></image>
            <image
              src="/static/svg/list-icon.svg"
              class="w-88 h-88 ml-20"
              @click="changeViewType('list')"
              v-else
            >
            </image>
          </block>
        </view>
        <view class="filter-wrapper">
          <StoreScreen
            @overlay_show="overlayShow"
            ref="screenRef"
            @onSearch="onScreen"
            @onReast="onReast"
          >
          </StoreScreen>
        </view>
      </view>
      <u-overlay
        :show="overlay_show"
        @click="clickOverlay"
        :zIndex="2"
      ></u-overlay>
      <view class="list bgc-fff" v-if="viewType === 'list'">
        <view class="h-28" v-if="dataList.length"></view>
        <view
          class="item bgc-fff pad-28"
          style="padding-top: 0"
          v-for="(item, index) in dataList"
          :key="index"
          @click="$utils.to(`/pages2/store/store_detail?id=${item.id}`)"
        >
          <view
            class="w-276 h-216 bgc-f5f5f5 br-12"
            style="overflow: hidden; min-width: 276rpx"
          >
            <image
              style="width: 100%; height: 100%"
              class="mr-24"
              :src="item.logo"
            >
            </image>
          </view>
          <view class="texts">
            <view>
              <view class="flex-between-center">
                <view style="width: 100%">
                  <u-text
                    :lines="1"
                    size="32rpx"
                    color="#1c1714"
                    :text="item.title || ''"
                  ></u-text>
                </view>
                <text
                  class="fs-28 c-ff0000"
                  style="white-space: nowrap"
                  v-if="item.distance && item.distance > 0"
                  >{{ `距我${item.distance || 0}KM` }}</text
                >
              </view>
              <view class="flex-column-center mt-16">
                <image src="/static/marker-icon.png" class="w-22 h-28"></image
                ><text class="fs-24 c-677585 ml-8">{{
                  item.region_name || ""
                }}</text>
              </view>
            </view>
            <view class="mt-12 flex-between-center">
              <text class="fs-24 c-677585">浏览 {{ item.see_num || 0 }}次</text>
              <view
                class="w-124 h-56 br-8 c-c5261d fs-24 fw-500 flex-center-center btn-active"
                style="border: 1px solid #c5261d"
                >详情
              </view>
            </view>
          </view>
          <!-- <view class="detail-btn w-124 h-60 br-12 flex-center-center">详情</view> -->
        </view>
      </view>
      <view v-else>
        <LandMap
          type="garden"
          ref="landMap"
          :data="dataList"
          @markerClick="handleMarkerClick"
        />
      </view>
    </z-paging>
  </view>
</template>

<script>
import StoreScreen from "@/components/StoreScreen/index.vue";
import LandMap from "@/components/LandMap.vue";
import { storeListApi } from "@/services/home.js";
export default {
  components: {
    StoreScreen,
    LandMap,
  },
  data() {
    return {
      overlay_show: false,
      viewType: "list",
      dataList: [],
      params: {
        title: "",
        lat: "",
        lng: "",
      },
      selectedValues: {},
    };
  },
  onLoad() {
    //获取当前经纬度
    this.params.lat = this.$store.state.locationInfo.lat || "";
    this.params.lng = this.$store.state.locationInfo.lng || "";
    this.$refs.pagingRef?.reload();
  },
  onShow() {
    setTimeout(() => {
      const { text } = this.$store.state.searchInfo;
      if (text) {
        this.params.title = text;
        this.$store.commit("clearSearchInfo");
        this.$refs.pagingRef?.reload();
      }
    }, 300);
  },
  methods: {
    onScreen(e) {
      const { area, distance, views } = e;
      const [city, district, town, village] = area;
      this.selectedValues = this.$options.data.selectedValues; //先还原
      const requestObj = {
        city: this.filterAll(city),
        district: this.filterAll(district),
        town: this.filterAll(town),
        village: this.filterAll(village),
        order_sort: { distance, see_num: views },
      };
      this.selectedValues = requestObj;
      this.$refs.pagingRef?.reload();
    },
    overlayShow(e) {
      this.overlay_show = e;
    },
    clickOverlay() {
      this.$refs.screenRef.overlay_show = false;
    },
    handleMarkerClick(item) {
      this.$utils.to(`/pages2/store/store_detail?id=${item.id}`);
    },
    handleSearch() {
      this.$refs.pagingRef?.reload();
    },
    queryList(page, size) {
      const requestObj = {
        page,
        page_size: this.viewType === "list" ? size : 9999,
        ...this.params,
        ...this.selectedValues,
      };
      storeListApi(requestObj).then((res) => {
        this.$refs.pagingRef?.complete(res.data?.data || []);
      });
    },
    changeViewType(type) {
      this.viewType = type;
      this.$refs.pagingRef?.reload();
    },
    handleFilterChange({ type, value }) {
      this.selectedValues[type] = value;
      this.$refs.pagingRef?.reload();
    },
    filterAll(e) {
      if (["all4", "all3", "all2", "all1"].includes(e)) {
        return "";
      }
      return e;
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  display: flex;
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 100;
}

.filter-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;

  .arrow {
    font-size: 12px;
    margin-left: 4px;
    transition: transform 0.3s;
    color: #999;

    &.arrow-up {
      transform: rotate(180deg);
    }
  }
}

.page {
  background-color: #f7f8fa;

  .page-top {
    padding-bottom: 28rpx;

    .search-box {
      position: relative;
      z-index: 999;
    }
  }

  .filter-wrapper {
    position: relative;
    z-index: 100;
  }

  .list {
    .item {
      display: flex;
      align-items: center;
      position: relative;

      .detail-btn {
        position: absolute;
        right: 28rpx;
        bottom: 28rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
        background-color: $theme_color;
      }

      .texts {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 216rpx;
        margin-left: 24rpx;

        & > view {
          font-size: 28rpx;

          & > text:first-child {
            color: #677585;
          }
        }
      }
    }
  }
}
</style>
